<script setup>

import ToolButtonList2 from "../tools/toolButtonList2.vue";
import SvgIcon from "../../../Svglcon.vue";
import {ref} from "vue";
import SunForward from "../tools/sunForward.vue";

const textureWidth = ref();

const angleSelectList = ref([
  {
    value: 'https://dummyimage.com/400/000000/ffffff',
    label: '漫反',
  },
  {
    value: 'https://dummyimage.com/400/000000/ffffff',
    label: '漫反射',
  },
  {
    value: 'https://dummyimage.com/400/000000/ffffff',
    label: '漫反射',
  }
])
const specularHighlights = ref()
const angle = ref()
const radio1 = ref()
</script>

<template>
  <div class="lightWarp">
    <div class="light">


      <div class="radiosLie">
        <div class="inputSelectContain" style="height: 30px;border: 0">
          <div class="sliderField">
            <div class="valueSlider">
              <div style="margin-left: 5px;margin-right: 5px">
                <el-button>生成</el-button>
              </div>
              <div style="flex: 1">
                <el-radio-group v-model="radio1" class="radioGroups">
                  <el-radio value="1" size="large">
                    <div>射灯</div>
                  </el-radio>
                  <el-radio value="2" size="large">
                    <div>面灯</div>
                  </el-radio>
                  <el-radio value="3" size="large">
                    <div>发光体</div>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pictureContain">
        <div class="inputSelectContain" style="height: 407px;border-top: 1px solid #ccc">
          <div class="threeSliderView" style="height: 250px;width: 100%;">
            <div class="sliderField">
              <div class="valueSlider" style="height: 100%;justify-content: space-between">
                <div style="height: 220px;width: 20px">
                  <el-slider v-model="specularHighlights" vertical height="200px" class="verticalSlider"/>
                </div>
                <div class="pictureView" style="height: 220px;width: 220px;">
                </div>
                <div style="height: 220px;width: 20px">
                  <el-slider v-model="specularHighlights" vertical height="200px" class="verticalSlider"/>
                </div>
              </div>

              <div class="valueSlider" style="width: 100%;justify-content: center">
                <el-slider style="width: 80%" v-model="specularHighlights" :show-tooltip="false"/>
              </div>

            </div>

          </div>
          <div class="sliderField">
            <div class="valueSlider">
              <div style="flex: 1">
                <el-select v-model="angle" placeholder="" style="width: 100%">
                  <el-option
                      v-for="item in angleSelectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </div>
              <div style="flex: 1">
                <el-select v-model="angle" placeholder="" style="width: 100%">
                  <el-option
                      v-for="item in angleSelectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </div>
              <div style="flex: 1">
                <el-radio-group v-model="radio1" class="radioGroups">
                  <el-radio value="1" size="large">
                    <div>关联灯光</div>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>

          </div>
          <div class="sliderField">
            <div class="valueSlider">
              <div style="flex: 3;">
                <el-slider v-model="specularHighlights" :show-tooltip="false"/>
              </div>
              <div style="flex: 1;display: flex">
                <el-input
                    v-model="specularHighlights"
                    size="small"
                >
                </el-input>
                <div>
                  <svg-icon name="close"></svg-icon>
                </div>
              </div>
            </div>

          </div>
          <div class="sliderField">
            <div class="valueSlider">
              <div style="flex: 3;">
                <el-slider v-model="specularHighlights" :show-tooltip="false"/>
              </div>
              <div style="flex: 1">
                <el-input-number
                    v-model="specularHighlights"
                    :min="0"
                    :max="180"
                    controls-position="right"
                    size="small"
                    class="k-el-input-number"
                >
                </el-input-number>
              </div>
            </div>

          </div>
        </div>

      </div>


      <div class="pathLight">
        <div class="materialMangeTitleBar">
          <div>
            <svg-icon name="close"/>
          </div>

          <div class="title">路径阵列布光</div>
        </div>
        <div class="inputSelectContain" style="height: 45px">
          <div class="sliderField">
            <div class="valueSlider">
              <div style="margin-left: 5px;margin-right: 5px">
                <el-button>布光</el-button>
              </div>

              <div style="flex: 1.5;display: flex;align-items: center;justify-content: flex-end;">
                <div>
                  间距
                </div>
              </div>
              <div style="flex: 1">
                <el-input-number
                    v-model="textureWidth"
                    :min="0"
                    :max="180"
                    controls-position="right"
                    size="small"
                    class="mm-el-input-number"
                >
                </el-input-number>
              </div>


            </div>


          </div>

        </div>

      </div>
      <div class="fillLight">
        <div class="materialMangeTitleBar">
          <div>
            <svg-icon name="close"/>
          </div>

          <div class="title">补光</div>
        </div>
        <div class="inputSelectContain" style="height: 116px">
          <div class="sliderField">
            <div class="valueSlider">
              <div style="margin-left: 5px;margin-right: 5px">
                <el-button>补光</el-button>
              </div>

              <div style="flex: 1.5;display: flex;align-items: center;justify-content: center;">
                <div>
                  间距
                </div>
              </div>
              <div style="flex: 1">
                <el-input-number
                    v-model="textureWidth"
                    :min="0"
                    :max="180"
                    controls-position="right"
                    size="small"
                    class="mm-el-input-number"
                >
                </el-input-number>
              </div>


            </div>


          </div>
          <div class="sliderField">
            <div class="valueSlider">
              <div style="margin-left: 5px;margin-right: 5px;flex: 1">
              </div>

              <div style="flex: 2;display: flex;align-items: center;justify-content: center;">
                <div>
                  高度
                </div>
                <div style="flex: 1">
                  <el-select v-model="angle" placeholder="" style="width: 100%">
                    <el-option
                        v-for="item in angleSelectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div style="flex: 1">
                <el-input-number
                    v-model="textureWidth"
                    :min="0"
                    :max="180"
                    controls-position="right"
                    size="small"
                    class="mm-el-input-number"
                >
                </el-input-number>
              </div>


            </div>
          </div>
          <div class="sliderField">
            <div class="valueSlider">
              <div style="margin-left: 5px;margin-right: 5px;flex: 1">
              </div>

              <div style="flex: 2;display: flex;align-items: center;justify-content: center;">
                <div>
                  分组
                </div>
                <div style="flex: 1">
                  <el-select v-model="angle" placeholder="" style="width: 100%">
                    <el-option
                        v-for="item in angleSelectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div style="flex: 1">
                <el-input-number
                    v-model="textureWidth"
                    :min="0"
                    :max="180"
                    controls-position="right"
                    size="small"
                    class="mm-el-input-number"
                >
                </el-input-number>
              </div>


            </div>


          </div>
        </div>
      </div>

    </div>

    <tool-button-list2></tool-button-list2>

  </div>

</template>

<style scoped lang="scss">
.light {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;


  :deep(.el-slider.is-vertical .el-slider__runway) {
    margin: 0;
  }


  .materialMangeTitleBar {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #EEEEEE;
    border: #CCCCCC 1px solid;

    .title {
      width: 100%;
      font-size: 14px;
      text-align: left;
      color: #999999;
    }
  }

  .inputSelectContain {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-top: 0px;
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .sliderField {
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-around;

      .sliderTitle {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .valueSlider {
        width: 100%;
        height: 30px;
        display: flex;
        margin-bottom: 5px;
      }
    }
  }

  :deep(.el-radio-group) {
    justify-content: flex-end;
  }

  :deep(.el-radio) {
    margin-right: 5px;
    height: 30px;
  }

  .radioGroups {
    width: 100%;
  }

  :deep(.el-input-number.is-controls-right[class*=small] [class*=decrease], .el-input-number.is-controls-right[class*=small] [class*=increase]) {
    --el-input-number-controls-height: 15px;
  }

  :deep(.el-input-number--small) {
    width: 71px;
    height: 30px;
  }

  :deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 0px;
  }

  .mm-el-input-number {
    position: relative;
  }

  .mm-el-input-number::after {
    content: 'mm';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 10px;
    text-align: center;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
  }

  .k-el-input-number {
    position: relative;
  }

  .k-el-input-number::after {
    content: 'K';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 10px;
    text-align: center;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
  }
}


</style>